<!--  -->
<template>
<div class='box'>
   <header>
       <span @click='$router.go(-1)'>取消</span>
   </header>
  <main>
      <h2>添加银行卡</h2>
      <p>请绑定持卡人本人的银行卡</p>
      <div class="addInfo">
           <van-field v-model="cardholder" label="持卡人" placeholder="先生/女士" />
            <van-field v-model="cardNum" label="卡号" placeholder="持卡人本人银行卡号" />
      </div>
      <div class="eightBank">
          <span>8家银行支持卡号添加</span>
            <div class="bankImg">
                <div><img src="../../../../../public/images/1_09.png" alt=""></div>
                <div><img src="../../../../../public/images/2_03.png" alt=""></div>
                <div><img src="../../../../../public/images/2_05.png" alt=""></div>
                <div><img src="../../../../../public/images/2_07.png" alt=""></div>
            </div>
      </div>
      <div class="nextBtn" @click='nextToCode'>
            下一步
      </div>
      <p>由连连支付提供</p>
  </main>

</div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return {
    cardholder:'',
    cardNum:''
};
},
//监听属性 类似于data概念
computed: {
},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
 ...mapMutations(['GET_CARDINFO']),   
nextToCode(){
    //vuex储存银行卡持有人和卡号 不能为空
    const numFour=this.cardNum.substr(this.cardNum.length-4)//卡号后4位
    this.GET_CARDINFO({cardholder:this.cardholder,cardNum:numFour})
    var zw=/^[\u4e00-\u9fa5]{1,10}$/ //中文
    var regExp = /^([1-9]{1})(\d{15}|\d{18})$/  //银行卡号
    if(zw.test(this.cardholder)===true&&regExp.test(this.cardNum)===true){
        this.$router.push('/VerificationCode') 
    }  else{//6210781240004250007
        alert('请完善信息或信息格式填写错误')
    }  
}
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

}
}
</script>
<style lang='scss' scoped>
 
    .box{
        width: 100%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        background: #fff;
        header{
            height: 3.75rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 1.25rem;
        background:#51547d;
        color: #ffffff;
        padding: 0 .9375rem;
        }
        main{
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            h2{
                height: 5rem;
                line-height: 5rem;
            }
            p{
                height: 3.75rem;
            }
            .addInfo{
                width: 100%;
                display: flex;
                flex-direction: column;
                border-bottom: .0625rem solid #f3f3f3;
                border-top: .0625rem solid #f3f3f3;
               div{
                   display: flex;
                   align-items: center;
                   height: 3.75rem;
               }
            }
            .eightBank{
                margin-top:1.25rem ;
                width: 100%;
                height: 6.25rem;
                background: #f3f3f3;
                padding:.9375rem 1.25rem;
                .bankImg{
                    padding-top: .1875rem;
                    display: flex;
                }
            }
            .nextBtn{
               display: flex;
               width: 90%;
                height: 3.125rem;
                background: #51547d;
                justify-content: space-around;
                align-items: center;
                margin: 1.875rem .625rem;
                border-radius: 1.875rem;
                color:#fff;
        }
            }
    }
</style>